<template>
    <div id="echarts2">

    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';
import useBigScreenStore from '@/stores/useBigScreenStore';
const bigScreenStore = useBigScreenStore()
const echartsData = ref()
const chartContainer = ref(null);
let myChart = null
let option = null
const color = [{
    fullColor: 'rgba(58,255,188,1)',
    littleColor: 'rgba(58,255,188,0.1)'
}, {
    fullColor: 'rgba(255,150,0,1)',
    littleColor: 'rgba(255,150,0,0.1)'
}, {
    fullColor: 'rgba(41,186,251,1)',
    littleColor: 'rgba(41,186,251,0.1)'
}, {
    fullColor: 'rgba(80,144,255,1)',
    littleColor: 'rgba(80,144,255,0.1)'
}, {
    fullColor: 'rgba(239,102,102,1)',
    littleColor: 'rgba(239,102,102,0.1)'
}, {
    fullColor: 'rgba(240,50,160,1)',
    littleColor: 'rgba(240,50,160,0.1)'
}]
const initEcharts = () => {
    chartContainer.value = document.getElementById('echarts2');
    myChart = echarts.init(chartContainer.value);

}
const getLineEcharts = (echartData) => {
    myChart.clear()
    const series = []
    let xData = []
    let legendData = []
    if (echartData[0]) {
        echartData[0].Usages.map(v => {
            xData.push(v.Uec_time)
        })
        xData = xData.reverse()
        console.log(xData);
    } else {
        xData = []
    }
    for (let i = 0; i < echartData.length; i++) {
        let yData = []
        if (echartData[i].Usages) {
            echartData[i].Usages.map(v => {
                yData.push(v.Use_time)
            })
        }
        const seriesItem = {
            name: typeof echartData[i].BuildName === 'undefined' ? `series${i}` : `${echartData[i].BuildName}`,
            type: 'line',
            smooth: true,
            emphasis: {
                focus: 'series'
            },
            markPoint: {
                data: [
                    {
                        type: 'max',
                        name: '最大值'
                    }
                ]
            },
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: color[i].fullColor
                    },
                    {
                        offset: 1,
                        color: color[i].littleColor
                    }
                ])
            },
            data: yData
        }
        series.push(seriesItem)

        let obj = {
            name: series[i].name,
            icon: 'circle',
            textStyle: {
                color: '#fff'
            }
        }
        legendData.push(obj)

    }
    option = {
        color: ['#3AFFBC', '#FF9600', '#29BAFB', '#5090FF', '#ef6666', '#f032a0'],
        tooltip: {
            trigger: 'axis',
            triggerOn: 'mousemove',
            valueFormatter: function (value) {
                console.log(value, 'rfg');
                return value + '次';
            },
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: legendData,
            itemGap: 25,
            right: 30,
            top: 0,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: xData
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '次',
                min: 0,
                max: function (value) {
                    return Math.ceil(value.max / 20) * 20;//向上取整，Math.floor为向下取整
                },
                interval: 200,
                axisLine: {
                    show: false//不显示y轴的线
                },
                axisLabel: {
                    formatter: '{value} '
                },
                splitLine: {                                //网格线
                    show: false,
                }
            }
        ],
        // series: [
        //     {
        //         name: '一号教学楼',
        //         type: 'line',
        //         smooth: true,

        //         emphasis: {
        //             focus: 'series'
        //         },

        //         data: [30, 20, 40, 50, 30, 70, 50, 30, 20, 40, 50, 30, 70, 50, 30, 20, 40, 50],
        //         markPoint: {
        //             data: [
        //                 {
        //                     type: 'max',
        //                     name: '最大值'
        //                 }
        //             ]
        //         }
        //     },
        //     {
        //         name: '二号教学楼',
        //         type: 'line',
        //         smooth: true,
        //         areaStyle: {
        //             opacity: 0.8,
        //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                 {
        //                     offset: 0,
        //                     color: 'rgba(255, 150, 0, 1)'
        //                 },
        //                 {
        //                     offset: 1,
        //                     color: 'rgba(255, 150, 0, .1)'
        //                 }
        //             ])
        //         },
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [40, 60, 20, 30, 60, 30, 70, 40, 60, 20, 30, 60, 30, 70, 40, 60, 20, 30],
        //         markPoint: {
        //             data: [
        //                 {
        //                     type: 'max',
        //                     name: '最大值'
        //                 }
        //             ]
        //         }
        //     },
        //     {
        //         name: '三号教学楼',
        //         type: 'line',
        //         smooth: true,
        //         areaStyle: {
        //             opacity: 0.8,
        //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                 {
        //                     offset: 0,
        //                     color: 'rgba(41, 186, 251, 1)'
        //                 },
        //                 {
        //                     offset: 1,
        //                     color: 'rgba(41, 186, 251, .1)'
        //                 }
        //             ])
        //         },
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [10, 80, 26, 74, 52, 12, 15, 10, 80, 26, 74, 52, 12, 15, 10, 80, 26, 74],
        //         markPoint: {
        //             data: [
        //                 {
        //                     type: 'max',
        //                     name: '最大值'
        //                 }
        //             ]
        //         }
        //     },
        //     {
        //         name: '四号教学楼',
        //         type: 'line',
        //         smooth: true,
        //         areaStyle: {
        //             opacity: 0.8,
        //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                 {
        //                     offset: 0,
        //                     color: 'rgba(80, 144, 255, 1)'
        //                 },
        //                 {
        //                     offset: 1,
        //                     color: 'rgba(80, 144, 255, .1)'
        //                 }
        //             ])
        //         },
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [5, 65, 95, 88, 40, 20, 99, 5, 65, 95, 88, 40, 20, 99, 5, 65, 95, 88],
        //         markPoint: {
        //             data: [
        //                 {
        //                     type: 'max',
        //                     name: '最大值'
        //                 }
        //             ]
        //         }
        //     }
        // ]
        series
    };
    myChart.setOption(option);
}
onMounted(() => {
    initEcharts()
})
watch(() => bigScreenStore.botEchartsData, (n, o) => {
    echartsData.value = n
    getLineEcharts(echartsData.value)
})
</script>

<style lang="scss" scoped>
#echarts2 {
    width: 100%;
    height: 200px;
}
</style>